<template>
  <div>
    <!-- 头部导航区域 -->
    <div>
      <!-- fixed可以让头部导航固定定位 -->
      <van-nav-bar fixed title="e头条资讯">
        <template v-slot:left>
          <img class="logo" src="@/assets/logo.png" />
        </template>
        <template #right>
          <van-icon
            name="search"
            size="0.48rem"
            color="#fff"
            @click="moveSearchPageFn"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- tab栏导航 
    vant-tabs 一行容器
    vant-tab每个tab栏
    v-model关联的激活项的下标（双向绑定）-->

    <div class="main">
      <van-tabs
        v-model="channelId"
        sticky
        offset-top="1.226667rem"
        animated
        @change="channelIdChange"
      >
        <van-tab
          v-for="item in userChannelList"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        >
          <article-list :channelId="channelId"></article-list>
        </van-tab>
      </van-tabs>

      <!-- 编辑频道图标 -->
      <van-icon
        name="plus"
        size="0.4rem"
        class="moreChannels"
        @click="showPopup"
      />
    </div>
    <!-- 频道管理弹出层 -->
    <van-popup v-model="show" class="channel_popup" get-container="body">
      <channel-edit
        :userList="userChannelList"
        :unCheckList="unCheckChannelList"
        @addChannelEV="addChannelFn"
        @removeChannelEV="removeChannelFn"
        @closeEV="closeFn"
        ref="editRef"
        v-model="channelId"
      ></channel-edit
    ></van-popup>
  </div>
</template>

<script>
//引入接口函数
import {
  getUserChannelsAPI,
  getAllChannelsApi,
  updateChannelsAPI,
  removeTheChannelAPI,
} from "@/api";
import ArticleList from "./components/ArticleList.vue";
import ChannelEdit from "./ChannelEdit.vue";
export default {
  components: { ArticleList, ChannelEdit },
  name: "Home",
  data() {
    return {
      channelId: 0, //tab导航-激活时的频道id（默认id为0，推荐的第一页）
      userChannelList: [], //用户选择的频道列表数据
      allChannelList: [], //所有频道列表
      // articleList: [], //存储文章数据
      show: false, //控制弹出层显示与隐藏
      channelScrollTObj: {}, //保存每个频道的滚动位置
      // 值样子构想：{推荐频道ID：滚动距离，html频道ID：自己滚动的距离}
    };
  },
  async created() {
    // 获取用户选择的频道列表数据
    const { data: res } = await getUserChannelsAPI();
    console.log(res);
    this.userChannelList = res.data.channels;
    // console.log(this.userChannelList);
    // 调用方法
    // this.channelIdChange();

    // 所有频道列表
    const { data: res2 } = await getAllChannelsApi();
    // console.log(res2);
    this.allChannelList = res2.data.channels;
  },
  methods: {
    // tabs的id切换事件->获取文章列表数据
    channelIdChange() {
      // 获取文章列表数据
      // console.log(this.channelId);
      // const { data: res2 } = await getAllArticleListAPI({
      //   channel_id: this.channelId,
      //   timestamp: new Date().getTime(),
      // });
      // this.articleList = res2.data.results;
      // console.log(this.articleList);

      // tab切换后，设置滚动条位置
      // tab切换时，这个组件内部，会把切走的容器height设置为0，滚动条因为没有高度回到了顶部
      // 切回来的一瞬间，没有高度，滚动事件从地下上来也被触发了，所以才把数据设置为0
      //切回来的一瞬间，高度为0，设置滚动位置也没用
      this.$nextTick(() => {
        document.documentElement.scrollTop =
          this.channelScrollTObj[this.channelId];
      });
    },
    // +号点击弹出层显示
    showPopup() {
      this.show = true;
    },
    // 添加频道
    async addChannelFn(channelObj) {
      this.userChannelList.push(channelObj);
      // 添加完后，还要把最新的数组发送给后台
      // 数组对象字段->转换
      // 推荐频道不能传递-筛选出不是推荐频道剩下的频道对象
      // 代码有问题，新增时，名字被删除了
      // 原因：所有数组的对象里，都是同一个内存地址，影响到ChannelEdit.vue中的对象
      // 解决方法
      // const newArray = this.userChannelList.filter((obj) => {
      //   obj.id !== 0;
      //   // return newArray;
      // });

      // const theNewArray = newArray.map((obj, index) => {
      //   const newObj = { ...obj }; //拷贝（浅拷贝）
      //   // delete newObj.name;
      //   newObj.seq = index;

      //   return newObj; //让map方法把新对象收集起来形成一个新数组
      // });

      const res = await updateChannelsAPI({
        channels: this.userChannelList,
        // channels: theNewArray,
      });
      console.log(res);
    },
    // 点击删除频道
    async removeChannelFn(channelObj) {
      const index = this.userChannelList.findIndex(
        (obj) => obj.id === channelObj.id
      );
      this.userChannelList.splice(index, 1);

      // 第一种方式：把现在用户数组的数据，再覆盖式的发给后台
      // 需要把上面的更新数组过程，封装一个函数，add和remove里调用
      // 第二种方式：只调用删除的接口
      const res = await removeTheChannelAPI({ channelId: channelObj.id });
      console.log(res);
      // 删除接口返回状态码204（Not Content）无返回内容
    },
    // 关闭弹出层
    closeFn() {
      this.show = false;
      //让内部的编辑状态回归false
      this.$refs.editRef.isEdit = false;
    },
    // 跳转搜索页面
    moveSearchPageFn() {
      this.$router.push("/search");
    },
    //
    scrollFn() {
      this.$route.meta.scrollT = document.documentElement.scrollTop;
      // 同时保存当前频道的滚动距离
      this.channelScrollTObj[this.channelId] =
        document.documentElement.scrollTop;
    },
  },
  // 计算属性(会同步上面最新的数组状态)
  computed: {
    unCheckChannelList() {
      // 把所有的频道数组挨个取出，去用户已选的数组里查找
      // 如果找不到吗，则让filter方法收集到一个新的数组里
      const newArray = this.allChannelList.filter((bigObj) => {
        let index = this.userChannelList.findIndex((smallObj) => {
          // 判断
          return smallObj.id === bigObj.id;
        });
        // 如果找到
        if (index > -1) {
          return false; //return false  则过滤器不会收集这个对象
        } else {
          return true;
        }
      });
      return newArray;
      //优化写法
      // return this.allChannelList.filter(
      //   (bigObj) =>
      //     this.userChannelList.findIndex(
      //       (smallObj) => smallObj.id === bigObj.id
      //     ) === -1
      // );
    },
  },
  // 激活组件
  activated() {
    console.log(this.$route);
    window.addEventListener("scroll", this.scrollFn);
    // window和document，监听网页滚动的事件
    // html标签获取scrollTop，监听滚动的距离，和设置滚动的位置
    // 立刻设置，滚动条位置
    document.documentElement.scrollTop = this.$route.meta.scrollT;
    //
  },
  // 失效时
  deactivated() {
    window.removeEventListener("scroll", this.scrollFn);
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #575b60;
}

/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/.van-tabs__line {
  background-color: #575b60;
}
.logo {
  width: 30px;
  height: 30px;
}
.main {
  padding-top: 46px;
}
// 设置tabs容器的样式
// /deep/ .van-nav__bar {
//   padding-right: 40px;
//   background-color: #fff;
// }
// 设置小图标的样式
.moreChannels {
  background-color: #fff;
  position: fixed;
  top: 60px;
  right: 0px;
  z-index: 999;
}
.channel_popup {
  height: 100vh;
  width: 100vw;
}
</style>
